<template>
	<view
		style="height: 100%; background-color: #CBD1D8;display: flex;flex-direction: column;justify-content: flex-start;box-sizing: border-box">
		<view
			style=" height: auto; background-color: #F4F6F7;display: flex;flex-direction: column;justify-content: flex-start;">
			<view
				style="position: fixed; z-index: 1000; flex:1; overflow: hidden; display: flex;justify-content: center; padding-left:5%; padding-right: 5%; padding-top: 10%; padding-bottom: 10%;">
				<view style="display: inline-flex;align-items: center;">
					<image src="../../static/logo3.svg" style="height:56px;width:56px;" mode="scaleToFill" />
				</view>
				<view
					style=" display: flex; flex-direction: column; align-items: left; justify-content: center; margin-left:10px;">
					<view style="font-size:1.3em;font-weight: bold;color: white;">吃巧Ai营养师</view>
					<view style="font-weight:360;color:white;font-size:1em;">Ai营养保健工具</view>
				</view>
			</view>
		</view>
		<view class="jiaonang" :style="{ height: navHeight + 'px' }">
			<view class="jiaonang-box" :style="{ height: navObj + 'px', paddingTop:  navTop + 'px', paddingRight: (navObjWid+5)+ 'px' }">
				<view class="jiaonang-box-back" @tap="goback()">
					<image class="jiaonang-box-back-img" src="../../static/fanhui.svg"  :style="{ height: navObj + 'px', width: navObj + 'px'}"/>
					<!-- <view class="jiaonang-box-back-txt">返回</view> -->
				</view>
			</view>
		</view>
		<view>
			<swiper class="swiper" :current="currentSwiperIndex" circular autoplay
				:style="{height:showConfig.swiperInitialHeight.toString()+'px'}" :interval="3000"
				@change="handlerSweiperChange">
				<swiper-item>
					<view class="swiper-item-box">
						<view style="margin-top: 15px;height: 1px;background-color: rgba(115, 112, 112, 0.15);margin-top: 30%;"></view>
						<view
							style="margin-top: 15px;padding-left: 20px;padding-right: 20px;font-size:46px;font-weight: 900;color:#16A085">
							<view>吃啥?怎么吃?</view>
							<view>才能更健康?</view>
						</view>
						<view 
							style="flex-grow: 1;overflow: hidden; margin-top: 10px;padding-left: 20px;padding-right: 20px;">
							<view v-for="(item,index) in tagList" :key="index"
								style="font-size: 16px;font-weight: 500; display: inline-block;padding: 3px 6px 3px 6px;border-radius: 15px;color:white;border: 2px solid #AFE7DC;margin: 2px;">
								{{item}}
							</view>
							<view
								style="font-size: 14px;font-weight: 500; display: inline-block;padding: 3px 6px 3px 6px;border-radius: 15px;color:white;border: 2px solid #AFE7DC;margin: 4px">
								...
							</view>
						</view>
						<view class="swiper-item-box-footer">
							<view style="height: 1px;background-color: rgba(255, 255, 255, 0.15);margin-bottom: 10px;"></view>
							<view style="color: white;font-size: 20px;font-weight: 700;height: 40px;">
								来「吃巧」看看就知道了。
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-box"
						style="background-image:linear-gradient(to bottom right, #ABD4F0, #3498DB);">

						<view style="height:1px; background-color:rgba(115, 112, 112, 0.15);margin-top: 30%;"></view>
						<view
							style="display: flex; flex-wrap: wrap; justify-content: flex-start;padding-left:5%; padding-right: 5%; padding-top: 8%; padding-bottom:5%; font-size:3.2em;font-weight: bolder;color:#2980B9">
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">给你科学健康的膳食方案
							</view>
						</view>
						<view
							style="flex-grow: 1;color:rgba(255, 255, 255, 0.5);padding-left:5%;padding-right:5%;font-size:1.6em;font-weight: initial">
							合理饮食，能让你和家人更健康。
						</view>
						<view style="height: 1px;background-color: rgba(255, 255, 255, 0.15); margin: 5%;  "></view>
						<view class="swiper-item-box-footer">
							<view style="color: white;font-size:1.5em; font-weight:bold; ">
								来「吃巧」，看看能让你和家人更健康的膳食方案吧。
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-box"
						style="background-image:linear-gradient(to bottom right, #DDB6ED, #AE51D4)">
						<view style="height:1px; background-color:rgba(115, 112, 112, 0.15);margin-top: 30%;"></view>
						<view
							style="display: flex; flex-wrap: wrap; justify-content: flex-start;padding-left:5%; padding-right: 5%; padding-top: 8%; padding-bottom:8%; font-size:3.2em;font-weight: bolder;color:#8E44AD">
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">帮你选</view>
							<view
								style="writing-mode: vertical-rl; transform: rotate(0deg);font-size: 0.5em; vertical-align: middle;">
								适宜</view>
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">健康的三</view>
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">餐食品</view>
						</view>
						<view
							style="flex-grow: 1;color:rgba(255, 255, 255, 0.5);padding-left:5%;padding-right:5%;font-size:1.6em;font-weight: initial">
							符合健康膳食要求+满足身体需求。
						</view>
						<view style="height: 1px;background-color: rgba(255, 255, 255, 0.15); margin: 5%;  "></view>
						<view class="swiper-item-box-footer">
							<view style="color: white;font-size:1.5em; font-weight:bold; ">
								来「吃巧」，看看哪些食物能满足你每天的健康需求。
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-box"
						style="background-image:linear-gradient(to bottom right, #F5B4AD, #E74C3C);">
						<view style="height:1px; background-color:rgba(115, 112, 112, 0.15);margin-top: 30%;"></view>
						<view
							style="display: flex; flex-wrap: wrap; justify-content: flex-start;padding-left:5%; padding-right: 5%; padding-top: 8%; padding-bottom:8%; font-size:3.2em;font-weight: bolder;color:#C0392B">
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">替你排除不能吃的食物
							</view>
						</view>
						<view
							style="flex-grow: 1;color:rgba(255, 255, 255, 0.5);padding-left:5%;padding-right:5%;font-size:1.6em;font-weight: initial">
							三餐食品推荐中无膳食方案标记忌讳、过敏、有损健康类食材食品。
						</view>
						<view style="height: 1px;background-color: rgba(255, 255, 255, 0.15); margin: 5%;  "></view>
						<view class="swiper-item-box-footer">
							<view style="color: white;font-size:1.5em; font-weight:bold; ">
								来「吃巧」，看满足健康要求、又能放心食用的食物。
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-box"
						style="background-image:linear-gradient(to bottom right, #FAD59C, #F39C12);">
						<view style="height:1px; background-color:rgba(115, 112, 112, 0.15);margin-top: 30%;"></view>
						<view
							style="display: flex; flex-wrap: wrap; justify-content: flex-start;padding-left:5%; padding-right: 0%; padding-top: 8%; padding-bottom:8%; font-size:3.2em;font-weight: bolder;color:#96640A">

							<view style="line-height:1em; display: inline-block; vertical-align: middle;">为你找</view>
							<view
								style="writing-mode: vertical-rl; transform: rotate(0deg);font-size: 0.5em; vertical-align: middle;">
								适宜</view>
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">亲朋共同</view>
							<view style="line-height:1em; display: inline-block; vertical-align: middle;">食用的美味</view>
						</view>

						<view
							style="flex-grow: 1;color:rgba(255, 255, 255, 0.5);padding-left:5%;padding-right:5%;font-size:1.6em;font-weight: initial">
							家人三餐、亲朋聚会众口难调？给你满足大家健康需要的食品推荐。
						</view>
						<view style="height: 1px;background-color: rgba(255, 255, 255, 0.15); margin: 5%;  "></view>
						<view class="swiper-item-box-footer">
							<view style="color: white;font-size:1.5em; font-weight:bold; ">
								来「吃巧」，看适宜健康要求、可和亲朋共享的食物。
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view
			style="width: auto; height:auto;display:flex;justify-content: space-around;align-items: center;padding: 10px;">
			<view style="display: inline-block;" @click="goSwiperPre()">
				<uni-icons type="arrow-left" size="26" color="#FFFFFF "></uni-icons>
			</view>
			<view
				style="display: inline-flex;height: 16px;background-color: #EAECEF;padding: 3px 10px 3px 10px;border-radius: 999px; justify-content: center;align-items: center;">
				<view :class="currentSwiperIndex==0?'swiper-slot-select':'swiper-slot'"
					style="background-color: #1ABC9C;"></view>
				<view :class="currentSwiperIndex==1?'swiper-slot-select':'swiper-slot'"
					style="background-color: #3498DB;"></view>
				<view :class="currentSwiperIndex==2?'swiper-slot-select':'swiper-slot'"
					style="background-color: #AE51D4;"></view>
				<view :class="currentSwiperIndex==3?'swiper-slot-select':'swiper-slot'"
					style="background-color: #E74C3C;"></view>
				<view :class="currentSwiperIndex==4?'swiper-slot-select':'swiper-slot'"
					style="background-color: #E67E22;"></view>
			</view>
			<view style="display: inline-block;" @click="goSwiperNext()">
				<uni-icons type="arrow-right" size="26" color="#FFFFFF"></uni-icons>
			</view>
		</view>
		<view class="login-button-box">

			<!-- #ifdef MP-WEIXIN -->
			<view class="login-button-content">
				<view style="margin: 6px 0 18px 0;color:#8292A2;display: flex;justify-content: center;align-items: center;">
					<view v-if="!isRead"
						style="display: inline-flex;justify-content: center;align-items: center;margin-right: 5px;"
						@click="toggleRead()">
						<image src="../../static/xuanzhong.svg" mode="scaleToFill" style="height:20px;width: 20px;" />
					</view>
					<view v-else="isRead"
						style="display: inline-flex;justify-content: center;align-items: center; margin-right: 5px;"
						@click="toggleRead()">
						<image src="../../static/weixuan.svg" mode="scaleToFill" style="height:20px;width: 20px;" />
					</view>
					<span style="font-size: 16px;font-weight: 400;color:#2E4964" @click="toggleRead()">我已阅读并同意</span>
					<span style="font-size: 16px;font-weight: 700;color:#1ABC9C" @tap.stop="goXieyi(1)">用户服务协议</span>、
					<span style="font-size: 16px;font-weight: 700;color:#1ABC9C" @tap.stop="goXieyi(2)">隐私条款</span>
				</view>
				<!-- <view
					style="height: 30px;display:flex;justify-content: center;align-items: center;  font-size:12px;color:red"
					v-if="!isRead">
					请先阅读并勾选上述内容
				</view> 
				<view style="width: 1px;height: 30px;" v-else>
				</view>-->
				<view class="login-button" style="margin-top: 20rpx" @click="wxLogin">
					<view style="color: white;font-size: 20px;font-weight: 700;">登录,为我服务</view>
					<view>订阅适膳食方案→</view>
				</view>
				<view class="beian">沪ICP备2024084191号-1X</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRead: false,
				showConfig: {
					screenHeight: null,
					swiperInitialHeight: 490,
					showTagCount: 5,
				},
				currentSwiperIndex: 0,
				canSendCodeTime: 0,
				timer: null,
				tagList: [
					"慢病食疗",
					"皮肤改善/养护",
					"免疫力调节",
					"瑜珈/健身",
					"亚健康干预",
					"膳食均衡",
					"力量练习",
					"特殊膳食",
					"滋阴壮阳",
					"脾胃调理",
					"地中海饮食方案",
					"中医理疗",
					"慢病食疗",
					"康复疗养",
					"SAP/按摩养生",
					"形体恢复",
					"婴幼儿辅食",
					"中老年人健康膳食",
					"清洁饮食",
				],
				loginFormData: {
					mobile: "",
					code: "",
				},
				navHeight: '',
				navTop: '',
				navObj: '',
				navObjWid: ''
			}
		},
		created() {
			if (this.$store.state.token != "" && this.$store.state.token != null) {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.showConfig.screenHeight = systemInfo.screenHeight;
			this.showConfig.swiperInitialHeight = this.showConfig.screenHeight - 225;
			this.showConfig.showTagCount = 2 + Math.ceil((this.showConfig.swiperInitialHeight - 417) / 20)
			let menuButtonObject = wx.getMenuButtonBoundingClientRect();
			let statusBarHeight = systemInfo.statusBarHeight
			let navTop = menuButtonObject.top
			let navObjWid = systemInfo.windowWidth - menuButtonObject.right + menuButtonObject.width // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
			let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			this.navHeight = navHeight; //导航栏总体高度
			this.navTop = navTop; //胶囊距离顶部距离
			this.navObj = menuButtonObject.height; //胶囊高度
			this.navObjWid = navObjWid; //胶囊宽度(包括右边距离)

		},
		beforeDestroy() {},
		computed: {},
		onShow() {},
		methods: {
			goback() {
				uni.navigateBack()
			},
			goView(flag) {
				uni.navigateTo({
					url: '/pages/webview/webview?flag=' + flag,
					complete(e) {
						console.log(e)
					}
				})
			},
			goXieyi(flag) {
				// 使用传参是为了使用url的动态协议
				uni.navigateTo({
					url: '/pages/login/xieyi?type=' + flag,
					complete(e) {
						console.log(e)
					}
				})
				console.log(flag)
			},
			toggleRead() {
				this.isRead = !this.isRead;
			},
			goSwiperPre() {
				if (this.currentSwiperIndex <= 0) {
					this.currentSwiperIndex = 4
				} else {
					this.currentSwiperIndex = this.currentSwiperIndex - 1;
				}
			},
			goSwiperNext() {
				if (this.currentSwiperIndex >= 4) {
					this.currentSwiperIndex = 0
				} else {
					this.currentSwiperIndex = this.currentSwiperIndex + 1;
				}
			},
			handlerSweiperChange(e) {
				this.currentSwiperIndex = e.detail.current;
			},
			wxLogin() {
				if (!this.isRead) {
					uni.showToast({
						title: "请先阅读用户服务协议和隐私条款",
						icon: "none"
					})
					return
				}
				uni.login({
					provider: 'weixin',
					success: (res) => {
						uni.showLoading({
							title: '登录中',
							mask: true
						});
						let params = {
							"wxCode": res.code,
						}
						this.$H.get('portal/auth/miniAppLogin', params).then((res) => {
							uni.hideLoading();
							if (res.code == 0) {
								uni.showToast({
									title: "登陆成功",
									icon: "none"
								})
								let info = {
									token: res.data,
								}
								this.$store.commit('login', info);
								this.$H.get("portal/user/info").then(res => {
									if (res.code == 0) {
										this.$store.commit('setNickname', res.data.nickname);
										if (res.data.photo != null && res.data.photo != "") {
											this.$store.commit('setPhoto', res.data.photo);
										}
									}
									if (this.$store.state.groupToken != null && this.$store
										.state.groupToken != "" && this.$store.state
										.groupToken != '[object Object]') {
										uni.redirectTo({
											url: "/pages/my/groupFenXiang?groupToken=" +
												this.$store.state.groupToken
										});
										return
									}
									let arr = getCurrentPages()
									if(arr.length == 1) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									} else {
										uni.navigateBack()
									}
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})
			},
			codeLogin() {
				if (this.loginFormData.mobile.trim() == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return;
				};
				if (this.loginFormData.code.trim() == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return;
				};
				let data = {
					"phone": this.loginFormData.mobile,
					"verifyCode": this.loginFormData.code,
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				this.$H.post("manage/mobileLogin", data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let info = {
							token: res.data.token,
						}
						let roleCodeList = res.data.codes;
						this.$store.commit('login', info);
						if (roleCodeList != "" && roleCodeList != null) {
							this.$store.commit('setRoleCodeList', JSON.stringify(roleCodeList));
						}
						uni.redirectTo({
							url: "/pages/index/index",
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			sendCode() {
				if (this.canSendCodeTime == 0) {
					if (this.loginFormData.mobile.trim() == "") {
						uni.showToast({
							title: "请输入手机号",
							icon: "none"
						})
						return;
					};
					let data = {
						"phone": this.loginFormData.mobile
					}
					uni.showLoading({
						title: '发送中',
						mask: true
					});
					this.$H.get("manage/verifyCode", data).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							let timestamp = new Date().getTime();
							this.$store.commit('setSendCodeLastTimstamp', timestamp);
							this.canSendCodeTime = 60;
							clearInterval(this.timer);
							this.timer = null;
							this.timer = setInterval(() => {
								if (this.canSendCodeTime == 0) {
									clearInterval(this.timer);
									this.timer = null;
									return;
								}
								this.canSendCodeTime = this.canSendCodeTime - 1;
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.jiaonang {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		&-box {
			display: flex;
			justify-content: flex-end;
			&-back {
				display: flex;
				align-items: center;
				justify-content: space-around;
				&-img {
					margin-right: 5px
				}
				&-txt {
					font-size: 32rpx;
					font-weight: 500;
					color: #1ABC9C;
				}
			}
		}
	}
	.beian {
		color: #CBD1D8;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.swiper-item-box {
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		height: 100%;
		background-image: linear-gradient(to bottom right, #A3E4D7, #1ABC9C);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.swiper-item-box-footer {
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 0px 20px 20px 20px;
	}

	.login-button-box {
		width: 100%;
		align-self: flex-end;
		background-color: white;
		display: flex;
		justify-content: center;
		border-top-left-radius: 50px;
		border-top-right-radius: 50px;
		box-shadow: 0px -16px 20px 0px rgba(46, 73, 100, 0.15);
		box-sizing: border-box;
	}

	.login-button-content {
		width: 100%;
		flex: 1;
		flex-shrink: 0;
		padding: 20px 20px 40px 20px;
	}

	.login-button {
		box-sizing: border-box;
		margin-top: 5px;
		width: 100%;
		padding: 20px;
		background-color: red;
		color: #FFFFFF;
		border-radius: 999px;
		cursor: pointer;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-image: radial-gradient(50% 50% at 50% 50%, #25D3B1 0%, #1ABC9C 96%);
		box-shadow: 0px 5px 15px 0px rgba(52, 73, 94, 0.2), inset 0px -10px 16px 0px rgba(255, 255, 255, 0.35), inset 0px 8px 15px 0px rgba(255, 255, 255, 0.45), inset 3px 15px 35px 0px rgba(255, 255, 255, 0.35);
	}

	.swiper-slot {
		height: 6px;
		width: 6px;
		border-radius: 3px;
		margin-right: 3px;
		display: inline-block;
	}

	.swiper-slot-select {
		height: 6px;
		width: 22px;
		border-radius: 3px;
		margin-right: 3px;
		display: inline-block;
	}
</style>